<?php

namespace JsonLowCode\UI;

use JsonLowCode\Schema;
use JsonLowCode\UI\Helper\DropdownOption;
use JsonLowCode\Traits\Props\HasAnimated;
use JsonLowCode\Traits\Props\HasChildrenField;
use JsonLowCode\Traits\Props\HasHugeSize;
use JsonLowCode\Traits\Props\HasKeyboard;
use JsonLowCode\Traits\Props\HasKeyField;
use JsonLowCode\Traits\Props\HasLabelField;

/**
 * 下拉菜单 Dropdown
 * @url https://www.naiveui.com/zh-CN/os-theme/components/dropdown#API
 * @method static Dropdown make(array $options = [],mixed $children = null) Dropdown组件
 */
class Dropdown extends Schema
{
    protected string $componentName = "NDropdown";

    use HasAnimated, HasChildrenField, HasKeyField, HasLabelField, HasKeyboard, HasHugeSize;

    protected array $options = [];

    /**
     * @param array $options
     * @param mixed|null $children
     */
    public function __construct(array $options = [],mixed $children = null)
    {
        parent::__construct();
        $options && $this->options($options);
        $children && $this->children($children);
    }

    /**
     * 下拉菜单传入的 options
     * @param string|array $options
     * @return $this
     */
    public function options(string|array $options): static
    {
        return $this->prop("options", $options);
    }

    /**
     * 下拉菜单传入的 options
     * @param $key
     * @param \Closure $callback
     * @return DropdownOption
     */
    public function addOption($key,\Closure $callback): DropdownOption
    {
        $option = new DropdownOption($key);
        $callback && $callback($option);
        $this->options[] = $option;
        return $option;
    }

    /**
     * 是否使用反转样式
     * @param string|bool $bool
     * @return $this
     */
    public function inverted(string|bool $bool = true): static
    {
        return $this->prop("inverted",$bool);
    }

    /**
     * 批量处理下拉菜单选项的 HTML 属性
     * @param string $nodeProps (option: DropdownOption | DropdownGroupOption) => HTMLAttributes
     * @return $this
     */
    public function nodeProps(string $nodeProps): static
    {
        return $this->events("node-props", $nodeProps);
    }

    /**
     * 批量处理下拉菜单的 HTML 属性
     * @param string $menuProps (option: DropdownOption | undefined, options: (DropdownOption | DropdownGroupOption)[]) => HTMLAttributes
     * @return $this
     */
    public function menuProps(string $menuProps): static
    {
        return $this->events("menu-props", $menuProps);
    }

    /**
     * 批量处理下拉菜单图标渲染
     * @param string $renderIcon (option: DropdownOption) => VNodeChild
     * @return $this
     */
    public function renderIcon(string $renderIcon): static
    {
        return $this->events("render-icon", $renderIcon);
    }

    /**
     * 批量处理下拉菜单标签渲染
     * @param string $renderLabel (option: DropdownOption) => VNodeChild
     * @return $this
     */
    public function renderLabel(string $renderLabel): static
    {
        return $this->events("render-label", $renderLabel);
    }

    /**
     * 批量处理下拉菜单渲染
     * @param string $renderOption (props: { node: VNode, option: DropdownOption | DropdownGroupOption }) => VNodeChild
     * @return $this
     */
    public function renderOption(string $renderOption): static
    {
        return $this->events("render-option", $renderOption);
    }

    /**
     * clickoutside 的时候触发的回调函数
     * @param string $onClickOutside (e: MouseEvent) => void
     * @return $this
     */
    public function onClickOutside(string $onClickOutside): static
    {
        return $this->events("onClickoutside",$onClickOutside);
    }

    /**
     * select 选中时触发的回调函数
     * @param string $onSelect (key: string | number, option: DropdownOption) => void
     * @return $this
     */
    public function onSelect(string $onSelect): static
    {
        return $this->events("onSelect",$onSelect);
    }

    public function toArray(): array
    {
        if ($this->options){
            $this->options($this->options);
        }
        return $this->attributes;
    }


}
